<template>
    <div class="sys-notice-container">
        <el-card shadow="hover"  style="height: 100%;" :body-style="{ paddingBottom: '15' }">
            <br>
            <el-row>
                <el-col :span="12" style="text-align: center;display: flex;align-items: center;justify-content: center">
                    <div class="frontweeokstyle" @click="PrevWeek">上一周</div>
                </el-col>
                <el-col :span="12" style="text-align: center;display: flex;align-items: center;justify-content: center">
                    <div class="backweekstyle" @click="NextWeek">下一周</div>
                </el-col>
            </el-row>
            <br>
            <br>
            <el-row >
                <el-table  :data="tableData" border :height="tableheight" v-loading="loading">
                    <el-table-column prop="name" label="姓名" width="80" />
                    <el-table-column prop="dayone" :label="Datelist[0]" witdh="180">
                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['dayone']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="daysecond" :label="Datelist[1]" witdh="180">

                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['daysecond']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template></el-table-column>
                    <el-table-column prop="daythrid" :label="Datelist[2]" witdh="180">
                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['daythrid']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dayforth" :label="Datelist[3]" witdh="180">
                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['dayforth']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dayfith" :label="Datelist[4]" witdh="180">
                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['dayfith']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="daysixth" :label="Datelist[5]" witdh="180">
                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['daysixth']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dayseventh" :label="Datelist[6]" witdh="180">
                        <template #default="scope">
                            <div style="height: 200px;overflow-y: scroll;">
                                <el-row v-for="(item, index) in scope.row['dayseventh']">
                                    <el-col :span="24">
                                        <el-tooltip class="box-item" effect="dark" :content="'所属项目：' + item.project"
                                            placement="top-start">
                                            <el-row>
                                                <el-col :span="3" v-if="item.isstudy"><div style="color:red;width: 100px;">【研】</div></el-col>
                                                <el-col :span="2">{{ index + 1 }}.</el-col>
                                                <el-col :span="15">{{ item.content }}</el-col>
                                                <el-col :span="4">{{ item.usetime }}h</el-col>
                                            </el-row>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="dailyTotal">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import commonFunction from '/@/utils/commonFunction';
import AddProject from '/@/views/business/project/component/addProject.vue';
import EditProject from '/@/views/business/project/component/editProject.vue';
import { GetDailyTotal } from '/@/api/business/projectDaily';
import { getProjects, delProject, OverProject } from '/@/api/business/project'
import { SysNoticeApi } from '/@/api-services/api';
let startTime = reactive(null);
let endTime = reactive(null);
const tableData = ref([]);
const Datelist = reactive([] as string[]);
const currentDate = reactive(new Date())
const loading = ref(true)
const tableheight = ref('300');
onMounted(async () => {
    initData();
});

const initData = async () => {
    await getweeks();
    await Getnote();
    await calcutetableheight();
}

const calcutetableheight = async()=>{
    var cardbox = document.getElementsByClassName('el-card');
    tableheight.value = cardbox[0].clientHeight-140; 
}

const Getnote = async () => {
    loading.value = true;
    let param = {
        startTime: Datelist[0]
    }
    const res = await GetDailyTotal(param);
    tableData.value = res.data.result ?? [];
    loading.value = false;
}
const getweeks = async () => {
    let startEndWeek = await getCurrentWeek();
    for (var i = 0; i <= 6; i++) {
        let resultdate = startEndWeek[0].getTime() + 1000 * 60 * 60 * 24 * i;
        var DateDays = new Date(resultdate)
        var localdate = DateDays.toLocaleDateString()
        var dateday = await dayToday(DateDays.getDay());
        Datelist.push(localdate);
    }
}

const PrevWeek = async () => {
    const datePreday = new Date(Datelist[0]).getTime() - 1000 * 60 * 60 * 24 * 7;
    for (var i = 0; i <= 6; i++) {
        let resultdate = datePreday + 1000 * 60 * 60 * 24 * i;
        var DateDays = new Date(resultdate)
        var localdate = DateDays.toLocaleDateString()
        var dateday = await dayToday(DateDays.getDay());
        Datelist[i] = localdate;
    }
    await Getnote();
}

const NextWeek = async () => {
    const datePreday = new Date(Datelist[0]).getTime() + 1000 * 60 * 60 * 24 * 7;
    for (var i = 0; i <= 6; i++) {
        let resultdate = datePreday + 1000 * 60 * 60 * 24 * i;
        var DateDays = new Date(resultdate)
        var localdate = DateDays.toLocaleDateString()
        var dateday = await dayToday(DateDays.getDay());
        Datelist[i] = localdate;
    }
    await Getnote();
}


const dayToday = async (day: number) => {
    switch (day) {
        case 0:
            return "日";
        case 1:
            return "一";
        case 2:
            return "二";
        case 3:
            return "三";
        case 4:
            return "四";
        case 5:
            return "五";
        case 6:
            return "六";
    }
}
// 本周
const getCurrentWeek = async () => {
    //获取当前时间
    //返回date是一周中的某一天
    const week = currentDate.getDay()
    //一天的毫秒数
    const millisecond = 1000 * 60 * 60 * 24
    //减去的天数
    const minusDay = week != 0 ? week - 1 : 6
    //本周 周一
    const monday = new Date(currentDate.getTime() - minusDay * millisecond)
    //本周 周日
    const sunday = new Date(monday.getTime() + 6 * millisecond)
    return [monday, sunday]
}


const GetToWeek = async () => {
    await timeSlotChange("本周");
    console.log(startTime, endTime);
    let days = await getTimeTwo(startTime, endTime);
    console.log(days);
}

/**
 * 获取两日期之间日期列表函数
 * 返回两个时间之间所有的日期
 * 参数示例 （'2021-05-31','2021-06-30'）
 * **/
const getTimeTwo = async (start, end) => {
    //初始化日期列表，数组
    let diffdate = new Array();
    let arr = []
    let i = 0;
    //开始日期小于等于结束日期,并循环
    while (start <= end) {
        diffdate[i] = start;
        //获取开始日期时间戳
        let stime_ts = new Date(start).getTime();
        //增加一天时间戳后的日期
        let next_date = stime_ts + (24 * 60 * 60 * 1000);
        //拼接年月日，这里的月份会返回（0-11），所以要+1
        let next_dates_y = new Date(next_date).getFullYear() + '-';
        let next_dates_m = (new Date(next_date).getMonth() + 1 < 10) ? '0' + (new Date(next_date).getMonth() + 1) + '-' : (new Date(next_date).getMonth() + 1) + '-';
        let next_dates_d = (new Date(next_date).getDate() < 10) ? '0' + new Date(next_date).getDate() : new Date(next_date).getDate();
        start = next_dates_y + next_dates_m + next_dates_d;
        //增加数组key
        i++;
    }
    return diffdate;
}



const timeSlotChange = async (val) => {
    let now = new Date(); //当前日期 
    let nowDayOfWeek = now.getDay(); //今天本周的第几天 
    let nowDay = now.getDate(); //当前日 
    let nowMonth = now.getMonth(); //当前月 
    let nowYear = now.getFullYear(); //当前年 
    let jd = Math.ceil((nowMonth + 1) / 3)
    switch (val) {
        case "本周":
            startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
            endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
            break;
        case "本月":
            startTime = new Date(nowYear, nowMonth, 1)
            endTime = new Date(nowYear, nowMonth + 1, 0)
            break;
        case "本季度":
            startTime = new Date(nowYear, (jd - 1) * 3, 1)
            endTime = new Date(nowYear, jd * 3, 0)
            break
        case "本年":
            startTime = new Date(nowYear, 0, 1)
            endTime = new Date(nowYear, 11, 31)
            break
    }
    console.log(startTime, endTime)
}

</script>

<style scoped>
.frontweeokstyle {
    width: 109px;
    height: 30px;
    position: relative;
    align-items: center;
    background-color: gray;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.frontweeokstyle:hover {
    background-color: dodgerblue;
    color: white;
}

.frontweeokstyle::before {
    content: '';
    display: block;
    position: absolute;
    left: -20px;
    /* 箭头位置 */
    top: -10px;
    /* 箭头位置 */
    border-top: 25px solid transparent;
    /* 箭头高低 */
    border-bottom: 25px solid transparent;
    /* 箭头高低 */
    border-right: 25px solid gray;
    /* 箭头长度*/
}

.frontweeokstyle:hover::before {
    content: '';
    display: block;
    position: absolute;
    left: -20px;
    /* 箭头位置 */
    top: -10px;
    /* 箭头位置 */
    border-top: 25px solid transparent;
    /* 箭头高低 */
    border-bottom: 25px solid transparent;
    /* 箭头高低 */
    border-right: 25px solid dodgerblue;
    /* 箭头长度*/
}

.backweekstyle {
    width: 109px;
    height: 30px;
    position: relative;
    background-color: gray;
    color: white;
    font-weight: bold;
    font-size: 20px;
    /* transform: rotate(-40deg); */
    /* 旋转角度 */
}

.backweekstyle:hover {
    width: 109px;
    height: 30px;
    position: relative;
    background-color: dodgerblue;
    color: white;
    font-weight: bold;
    font-size: 20px;
    /* transform: rotate(-40deg); */
    /* 旋转角度 */
}


.backweekstyle:hover::after {
    content: '';
    display: block;
    position: absolute;
    right: -20px;
    /* 箭头位置 */
    top: -10px;
    /* 箭头位置 */
    border-top: 25px solid transparent;
    /* 箭头高低 */
    border-bottom: 25px solid transparent;
    /* 箭头高低 */
    border-left: 25px solid dodgerblue;
    /* 箭头长度*/
}

.backweekstyle::after {
    content: '';
    display: block;
    position: absolute;
    right: -20px;
    /* 箭头位置 */
    top: -10px;
    /* 箭头位置 */
    border-top: 25px solid transparent;
    /* 箭头高低 */
    border-bottom: 25px solid transparent;
    /* 箭头高低 */
    border-left: 25px solid gray;
    /* 箭头长度*/
}
</style>
